<template>
  <div class="tabbar">
    <router-link
      v-for="item in tabsRoutes"
      :key="item.path"
      :to="item.path"
    >
      <mt-badge
        v-if="item.name === 'cart'"
        size="small"
        color="#f00"
      >{{cartCount | toPlus}}</mt-badge>
      <i :class="iconClass(item)"></i>
      <span class="title">{{item.title}}</span>
    </router-link>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

const tabsRoutes = [
  {
    path: '/home',
    name: 'home',
    icon: 'home',
    title: '首页',
  },
  {
    path: '/category',
    name: 'category',
    icon: 'mall',
    title: '分类',
  },
  {
    path: '/cart',
    name: 'cart',
    icon: 'cart',
    title: '购物车',
  },
  {
    path: '/mine',
    name: 'mine',
    icon: 'mine',
    title: '我的',
  },
];
export default {
  name: 'tabbar',
  data() {
    return {
      tabsRoutes,
    };
  },
  filters: {
    toPlus(val) {
      return val > 99 ? '99+' : val;
    },
  },
  computed: {
    ...mapGetters(['cartCount']),
    currentPath() {
      return this.$route.fullPath;
    },
    iconClass() {
      return item => `iconfont icon-${item.icon}-${this.currentPath === item.path ? 'active' : 'normal'}`;
    },
  },
};
</script>

<style lang="scss">
.tabbar {
  width: 100%;
  display: flex;
  height: 64px;
  background-color: #fff;
  border-top: 1px solid #dedede;

  > a {
    flex: 1;
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    color: #666;
    position: relative;

    .iconfont {
      font-size: 30px;
      line-height: 40px;
    }

    .title {
      font-size: 14px;
      line-height: 24px;
    }

    &.router-link-active {
      color: #f72a26;
    }
    .mint-badge {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
